<template>
  <div>
    <el-row class="info" justify="start">
      <el-col :span="3">昵称</el-col>
      <el-col :span="4" class="info-content">{{customerData.username}}</el-col>
    </el-row>
        <el-row class="info">
      <el-col :span="3">真实姓名</el-col>
      <el-col :span="4" class="info-content">{{customerData.realname}}</el-col>
    </el-row>
    <el-row class="info">
      <el-col :span="3">性别</el-col>
      <el-col :span="4" class="info-content">{{customerData.gender}}</el-col>
    </el-row>
        <el-row class="info">
      <el-col :span="3">居住地</el-col>
      <el-col :span="4" class="info-content">{{customerData.province}}{{customerData.city}}</el-col>
    </el-row>
        <el-row class="info">
      <el-col :span="3">电话号码</el-col>
      <el-col :span="4" class="info-content">{{customerData.telephone}}</el-col>
    </el-row>
        <el-row class="info">
      <el-col :span="3">照片</el-col>
      <el-col :span="14" class="info-content">{{customerData.imgPhoto}}</el-col>
    </el-row>
            <el-row class="info">
      <el-col :span="3">状态</el-col>
      <el-col :span="4" class="info-content">{{customerData.status}}</el-col>
    </el-row>
        <el-row class="info">
      <el-col :span="3">银行卡</el-col>
      <el-col :span="14" class="info-content">{{customerData.bankCard}}</el-col>
    </el-row>
    <el-row class="info">
      <el-col :span="3">余额</el-col>
      <el-col :span="14" class="info-content">{{customerData.money}}</el-col>
    </el-row>

  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      id: this.$route.params.id,
    };
  },
  computed: {
    ...mapState("customer", ["customerData"]),
  },
  methods: {
    ...mapActions("customer", ["findCustomerById"]),
  },
  created() {
    this.findCustomerById({ id: this.id });
  },
  mounted() {},
};
</script>
<style>
  .info{
    /* font-size: 18px; */
    margin-top: 10px;
    margin-left: 20px;
    color: rgb(0, 0, 0);
    margin-bottom: 20px;
  }
  .info-content{
    font-size: 16px;
    text-align: left;
    color: gray;
  }
</style>